import React from 'react';
import style from './style.okr';
import Priority from './Priority';
import OkrProcess from './OkrProcess';
import cx from 'classnames';

class CompOkr extends React.Component {
  constructor(props) {
    super(props);
    this.displayName = 'CompOkr';
  }
  render() {
    const {
      okrs
    } = this.props;
    const {
      objectiveVOList = []
    } = okrs;
    return ( 
      <div className={style['okr-layout']}>
        <div className={style['okr-area']}>
          <div className={style['okr-comp-process']}>
            <div className={style['okr-team-tag']}>
              进度
            </div>
            <div style={{display: 'inline-block'}}>
              <OkrProcess value={+okrs.totalProgress} width={314} radius={6} height={12} />
            </div>
            <div className={style['okr-comp-text']}>{Math.round(okrs.totalProgress*100)}%</div>
          </div>
          <div style={{padding: '0 17px'}}>
            {
              objectiveVOList.slice(0,9).map( (v,i) => {
                return (
                  <div key={i} className={style['okr-comp-item']}>
                    <div style={{width: '15px'}}>
                      <Priority  value={v.priority}/>
                    </div>
                    <div style={{width: '260px'}}  className={style['okr-title']}>
                      <div style={{width: '260px'}}  className={style['ell']}><a  onClick={()=>{this.props.toOkr(null,v.objectiveId)}}>{v.content}</a></div>
                    </div>
                  </div>
                );
              })
            }
          </div>
        </div>
      </div>
    );
  }
}

export default CompOkr;
